<template>
  <div class="marketing-dashboard">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">营销自动化中心</h1>
      <p class="page-subtitle">智能管理多平台营销活动，提升转化效果</p>
    </div>

    <!-- 数据概览 -->
    <div class="overview-section">
      <div class="overview-cards">
        <div class="overview-card">
          <div class="card-icon">
            <TrendingUp class="w-8 h-8 text-blue-500" />
          </div>
          <div class="card-content">
            <h3 class="card-title">总触达量</h3>
            <p class="card-value">{{ formatNumber(dashboardData.performance?.total_reach || 0) }}</p>
            <span class="card-trend positive">+12.5%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">
            <Heart class="w-8 h-8 text-red-500" />
          </div>
          <div class="card-content">
            <h3 class="card-title">总互动量</h3>
            <p class="card-value">{{ formatNumber(dashboardData.performance?.total_engagement || 0) }}</p>
            <span class="card-trend positive">+8.3%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">
            <Target class="w-8 h-8 text-green-500" />
          </div>
          <div class="card-content">
            <h3 class="card-title">互动率</h3>
            <p class="card-value">{{ dashboardData.performance?.engagement_rate || 0 }}%</p>
            <span class="card-trend positive">+2.1%</span>
          </div>
        </div>
        
        <div class="overview-card">
          <div class="card-icon">
            <DollarSign class="w-8 h-8 text-purple-500" />
          </div>
          <div class="card-content">
            <h3 class="card-title">转化率</h3>
            <p class="card-value">{{ dashboardData.performance?.conversion_rate || 0 }}%</p>
            <span class="card-trend positive">+1.8%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能导航 -->
    <div class="function-nav">
      <div class="nav-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          :class="['nav-tab', { active: activeTab === tab.key }]"
          @click="activeTab = tab.key"
        >
          <component :is="tab.icon" class="w-5 h-5" />
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 营销活动管理 -->
      <div v-if="activeTab === 'campaigns'" class="tab-content">
        <div class="section-header">
          <h2 class="section-title">营销活动管理</h2>
          <button class="btn-primary" @click="showCreateCampaign = true">
            <Plus class="w-4 h-4" />
            创建活动
          </button>
        </div>
        
        <div class="campaigns-grid">
          <div v-for="campaign in campaigns" :key="campaign.id" class="campaign-card">
            <div class="campaign-header">
              <h3 class="campaign-name">{{ campaign.name }}</h3>
              <span :class="['campaign-status', campaign.status]">{{ getCampaignStatusText(campaign.status) }}</span>
            </div>
            <p class="campaign-description">{{ campaign.description }}</p>
            <div class="campaign-metrics">
              <div class="metric">
                <span class="metric-label">触达量</span>
                <span class="metric-value">{{ formatNumber(campaign.metrics.total_reach) }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">互动量</span>
                <span class="metric-value">{{ formatNumber(campaign.metrics.total_engagement) }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">转化率</span>
                <span class="metric-value">{{ campaign.metrics.conversion_rate }}%</span>
              </div>
            </div>
            <div class="campaign-actions">
              <button class="btn-secondary" @click="editCampaign(campaign)">
                <Edit class="w-4 h-4" />
                编辑
              </button>
              <button class="btn-secondary" @click="viewCampaignDetails(campaign)">
                <BarChart3 class="w-4 h-4" />
                数据
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容管理 -->
      <div v-if="activeTab === 'content'" class="tab-content">
        <div class="section-header">
          <h2 class="section-title">内容管理</h2>
          <button class="btn-primary" @click="showCreateContent = true">
            <Plus class="w-4 h-4" />
            创建内容
          </button>
        </div>
        
        <div class="content-filters">
          <select v-model="contentFilter.type" class="filter-select">
            <option value="">全部类型</option>
            <option value="video">视频</option>
            <option value="image">图片</option>
            <option value="text">文字</option>
          </select>
          <input 
            v-model="contentFilter.search" 
            type="text" 
            placeholder="搜索内容..." 
            class="filter-input"
          />
        </div>
        
        <div class="content-grid">
          <div v-for="content in filteredContents" :key="content.id" class="content-card">
            <div class="content-preview">
              <div v-if="content.type === 'video'" class="content-type-icon video">
                <Video class="w-6 h-6" />
              </div>
              <div v-else-if="content.type === 'image'" class="content-type-icon image">
                <Image class="w-6 h-6" />
              </div>
              <div v-else class="content-type-icon text">
                <FileText class="w-6 h-6" />
              </div>
            </div>
            <div class="content-info">
              <h3 class="content-title">{{ content.title }}</h3>
              <p class="content-description">{{ content.description }}</p>
              <div class="content-tags">
                <span v-for="tag in content.tags" :key="tag" class="content-tag">{{ tag }}</span>
              </div>
              <div class="content-meta">
                <span class="content-date">{{ formatDate(content.created_at) }}</span>
                <div class="content-actions">
                  <button class="action-btn" @click="editContent(content)">
                    <Edit class="w-4 h-4" />
                  </button>
                  <button class="action-btn" @click="publishContent(content)">
                    <Send class="w-4 h-4" />
                  </button>
                  <button class="action-btn" @click="deleteContent(content)">
                    <Trash2 class="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据分析 -->
      <div v-if="activeTab === 'analytics'" class="tab-content">
        <div class="section-header">
          <h2 class="section-title">数据分析</h2>
          <button class="btn-primary" @click="generateReport">
            <Download class="w-4 h-4" />
            生成报告
          </button>
        </div>
        
        <!-- 平台表现 -->
        <div class="analytics-section">
          <h3 class="analytics-title">平台表现</h3>
          <div class="platform-stats">
            <div v-for="(stats, platform) in dashboardData.platform_stats" :key="platform" class="platform-card">
              <div class="platform-header">
                <h4 class="platform-name">{{ getPlatformName(platform) }}</h4>
                <span class="platform-engagement">{{ stats.engagement_rate }}% 互动率</span>
              </div>
              <div class="platform-metrics">
                <div class="platform-metric">
                  <span class="metric-label">粉丝数</span>
                  <span class="metric-value">{{ formatNumber(stats.followers) }}</span>
                </div>
                <div class="platform-metric">
                  <span class="metric-label">发布数</span>
                  <span class="metric-value">{{ stats.posts }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 热门话题 -->
        <div class="analytics-section">
          <h3 class="analytics-title">热门话题</h3>
          <div class="trending-topics">
            <div v-for="topic in dashboardData.trending_topics" :key="topic.topic" class="topic-item">
              <span class="topic-name">{{ topic.topic }}</span>
              <div class="topic-heat">
                <div class="heat-bar" :style="{ width: topic.heat + '%' }"></div>
                <span class="heat-value">{{ topic.heat }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 最近活动 -->
        <div class="analytics-section">
          <h3 class="analytics-title">最近活动</h3>
          <div class="recent-activities">
            <div v-for="activity in dashboardData.recent_activities" :key="activity.time" class="activity-item">
              <div class="activity-icon">
                <component :is="getActivityIcon(activity.type)" class="w-5 h-5" />
              </div>
              <div class="activity-content">
                <p class="activity-text">{{ activity.content }}</p>
                <span class="activity-time">{{ formatTime(activity.time) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 发布任务 -->
      <div v-if="activeTab === 'tasks'" class="tab-content">
        <div class="section-header">
          <h2 class="section-title">发布任务</h2>
          <button class="btn-primary" @click="showCreateTask = true">
            <Plus class="w-4 h-4" />
            创建任务
          </button>
        </div>
        
        <div class="tasks-list">
          <div v-for="task in publishTasks" :key="task.id" class="task-item">
            <div class="task-info">
              <h3 class="task-title">内容发布任务</h3>
              <p class="task-platforms">平台: {{ task.platforms.join(', ') }}</p>
              <span class="task-time">{{ task.schedule_time ? '定时发布: ' + formatDateTime(task.schedule_time) : '立即发布' }}</span>
            </div>
            <div class="task-status">
              <span :class="['status-badge', task.status]">{{ getTaskStatusText(task.status) }}</span>
            </div>
            <div class="task-actions">
              <button class="btn-secondary" @click="viewTaskDetails(task)">
                <Eye class="w-4 h-4" />
                查看
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 创建活动弹窗 -->
    <div v-if="showCreateCampaign" class="modal-overlay" @click="showCreateCampaign = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">创建营销活动</h3>
          <button class="modal-close" @click="showCreateCampaign = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="createCampaign">
            <div class="form-group">
              <label class="form-label">活动名称</label>
              <input v-model="newCampaign.name" type="text" class="form-input" required />
            </div>
            <div class="form-group">
              <label class="form-label">活动描述</label>
              <textarea v-model="newCampaign.description" class="form-textarea"></textarea>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">开始时间</label>
                <input v-model="newCampaign.start_date" type="datetime-local" class="form-input" required />
              </div>
              <div class="form-group">
                <label class="form-label">结束时间</label>
                <input v-model="newCampaign.end_date" type="datetime-local" class="form-input" required />
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">目标平台</label>
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input v-model="newCampaign.target_platforms" type="checkbox" value="douyin" />
                  抖音
                </label>
                <label class="checkbox-item">
                  <input v-model="newCampaign.target_platforms" type="checkbox" value="xiaohongshu" />
                  小红书
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">预算 (元)</label>
              <input v-model="newCampaign.budget" type="number" class="form-input" min="0" />
            </div>
            <div class="modal-actions">
              <button type="button" class="btn-secondary" @click="showCreateCampaign = false">取消</button>
              <button type="submit" class="btn-primary">创建活动</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 创建内容弹窗 -->
    <div v-if="showCreateContent" class="modal-overlay" @click="showCreateContent = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">创建内容</h3>
          <button class="modal-close" @click="showCreateContent = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="createContent">
            <div class="form-group">
              <label class="form-label">内容标题</label>
              <input v-model="newContent.title" type="text" class="form-input" required />
            </div>
            <div class="form-group">
              <label class="form-label">内容描述</label>
              <textarea v-model="newContent.description" class="form-textarea" required></textarea>
            </div>
            <div class="form-group">
              <label class="form-label">内容类型</label>
              <select v-model="newContent.type" class="form-select" required>
                <option value="">请选择类型</option>
                <option value="video">视频</option>
                <option value="image">图片</option>
                <option value="text">文字</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">标签</label>
              <input v-model="newContentTags" type="text" class="form-input" placeholder="用逗号分隔多个标签" />
            </div>
            <div class="modal-actions">
              <button type="button" class="btn-secondary" @click="showCreateContent = false">取消</button>
              <button type="submit" class="btn-primary">创建内容</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 创建任务弹窗 -->
    <div v-if="showCreateTask" class="modal-overlay" @click="showCreateTask = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">创建发布任务</h3>
          <button class="modal-close" @click="showCreateTask = false">
            <X class="w-5 h-5" />
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="createPublishTask">
            <div class="form-group">
              <label class="form-label">选择内容</label>
              <select v-model="newTask.content_id" class="form-select" required>
                <option value="">请选择内容</option>
                <option v-for="content in contents" :key="content.id" :value="content.id">
                  {{ content.title }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">发布平台</label>
              <div class="checkbox-group">
                <label class="checkbox-item">
                  <input v-model="newTask.platforms" type="checkbox" value="douyin" />
                  抖音
                </label>
                <label class="checkbox-item">
                  <input v-model="newTask.platforms" type="checkbox" value="xiaohongshu" />
                  小红书
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">发布时间</label>
              <input v-model="newTask.schedule_time" type="datetime-local" class="form-input" />
              <small class="form-hint">留空表示立即发布</small>
            </div>
            <div class="modal-actions">
              <button type="button" class="btn-secondary" @click="showCreateTask = false">取消</button>
              <button type="submit" class="btn-primary">创建任务</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import marketingService from '@/services/marketingAutomationService';

// 创建toast对象
const toast = {
  success: (message: string) => {
    uni.showToast({ title: message, icon: 'success' });
  },
  error: (message: string) => {
    uni.showToast({ title: message, icon: 'error' });
  }
};

@Component
export default class MarketingDashboard extends Vue {
  // 响应式数据
  activeTab = 'campaigns';
  dashboardData: any = {};
  campaigns: any[] = [];
  contents: any[] = [];
  publishTasks: any[] = [];

  // 弹窗状态
  showCreateCampaign = false;
  showCreateContent = false;
  showCreateTask = false;

  // 表单数据
  newCampaign = {
    name: '',
    description: '',
    start_date: '',
    end_date: '',
    target_platforms: [] as string[],
    budget: 0
  };

  newContent = {
    title: '',
    description: '',
    type: '',
    tags: [] as string[]
  };

  newContentTags = '';

  newTask = {
    content_id: '',
    platforms: [] as string[],
    schedule_time: ''
  };

  // 内容筛选
  contentFilter = {
    type: '',
    search: ''
  };

  // 标签页配置
  tabs = [
    { key: 'campaigns', label: '营销活动', icon: 'Calendar' },
    { key: 'content', label: '内容管理', icon: 'FileText' },
    { key: 'analytics', label: '数据分析', icon: 'BarChart3' },
    { key: 'tasks', label: '发布任务', icon: 'Send' }
  ];

  // 计算属性
  get filteredContents() {
    let filtered = this.contents;
    
    if (this.contentFilter.type) {
      filtered = filtered.filter((content: any) => content.type === this.contentFilter.type);
    }
    
    if (this.contentFilter.search) {
      const search = this.contentFilter.search.toLowerCase();
      filtered = filtered.filter((content: any) => 
        content.title.toLowerCase().includes(search) ||
        content.description.toLowerCase().includes(search)
      );
    }
    
    return filtered;
  }

  // 方法
  async loadDashboardData() {
    try {
      // 模拟数据加载
      this.dashboardData = {
        performance: {
          total_reach: 125000,
          total_engagement: 8500,
          engagement_rate: 6.8,
          conversion_rate: 2.3
        },
        platform_stats: {
          douyin: { engagement_rate: 7.2 },
          xiaohongshu: { engagement_rate: 6.4 }
        }
      };
    } catch (error) {
      console.error('加载仪表板数据失败:', error);
      toast.error('加载数据失败');
    }
  }

  async loadCampaigns() {
    try {
      const response = await marketingService.getCampaigns() as any;
      if (response.success) {
        this.campaigns = response.data.campaigns;
      }
    } catch (error) {
      console.error('加载营销活动失败:', error);
    }
  }

  async loadContents() {
    try {
      // 模拟数据加载
      this.contents = [];
    } catch (error) {
      console.error('加载内容失败:', error);
    }
  }

  async loadPublishTasks() {
    try {
      // 模拟数据加载
      this.publishTasks = [];
    } catch (error) {
      console.error('加载发布任务失败:', error);
    }
  }

  async createCampaign() {
    try {
      const response = await marketingService.createCampaign({
        ...this.newCampaign,
        content_ids: [] // 暂时为空，后续可以选择内容
      } as any) as any;
      
      if (response.success) {
        toast.success('营销活动创建成功');
        this.showCreateCampaign = false;
        this.resetCampaignForm();
        await this.loadCampaigns();
      }
    } catch (error) {
      console.error('创建营销活动失败:', error);
      toast.error('创建活动失败');
    }
  }

  async createContent() {
    try {
      const contentData = {
        ...this.newContent,
        tags: this.newContentTags.split(',').map((tag: string) => tag.trim()).filter((tag: string) => tag)
      };
      
      const response = await marketingService.createContent(contentData as any) as any;
      
      if (response.success) {
        toast.success('内容创建成功');
        this.showCreateContent = false;
        this.resetContentForm();
        await this.loadContents();
      }
    } catch (error) {
      console.error('创建内容失败:', error);
      toast.error('创建内容失败');
    }
  }

  async createPublishTask() {
    try {
      const taskData = {
        ...this.newTask,
        schedule_time: this.newTask.schedule_time || null
      };
      
      const response = await marketingService.createPublishTask(taskData.content_id, taskData as any) as any;
      
      if (response.success) {
        toast.success('发布任务创建成功');
        this.showCreateTask = false;
        this.resetTaskForm();
        await this.loadPublishTasks();
      }
    } catch (error) {
      console.error('创建发布任务失败:', error);
      toast.error('创建任务失败');
    }
  }

  resetCampaignForm() {
    Object.assign(this.newCampaign, {
      name: '',
      description: '',
      start_date: '',
      end_date: '',
      target_platforms: [],
      budget: 0
    });
  }

  resetContentForm() {
    Object.assign(this.newContent, {
      title: '',
      description: '',
      type: '',
      tags: []
    });
    this.newContentTags = '';
  }

  resetTaskForm() {
    Object.assign(this.newTask, {
      content_id: '',
      platforms: [],
      schedule_time: ''
    });
  }

  // 工具方法
  formatNumber(num: number) {
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
  }

  formatDate(dateString: string) {
    return new Date(dateString).toLocaleDateString('zh-CN');
  }

  formatTime(dateString: string) {
    const now = new Date();
    const date = new Date(dateString);
    const diff = now.getTime() - date.getTime();
    const hours = Math.floor(diff / (1000 * 60 * 60));
    
    if (hours < 1) {
      return '刚刚';
    } else if (hours < 24) {
      return `${hours}小时前`;
    } else {
      return this.formatDate(dateString);
    }
  }

  formatDateTime(dateString: string) {
    return new Date(dateString).toLocaleString('zh-CN');
  }

  getCampaignStatusText(status: string) {
    const statusMap: Record<string, string> = {
      draft: '草稿',
      active: '进行中',
      paused: '已暂停',
      completed: '已完成'
    };
    return statusMap[status] || status;
  }

  getTaskStatusText(status: string) {
    const statusMap: Record<string, string> = {
      pending: '待发布',
      publishing: '发布中',
      completed: '已完成',
      failed: '失败'
    };
    return statusMap[status] || status;
  }

  getPlatformName(platform: string) {
    const platformMap: Record<string, string> = {
      douyin: '抖音',
      xiaohongshu: '小红书'
    };
    return platformMap[platform] || platform;
  }

  getActivityIcon(type: string) {
    const iconMap: Record<string, string> = {
      publish: 'send',
      campaign: 'calendar',
      analytics: 'bar-chart'
    };
    return iconMap[type] || 'activity';
  }

  // 事件处理
  editCampaign(campaign: any) {
    // TODO: 实现编辑功能
    console.log('编辑活动:', campaign);
  }

  viewCampaignDetails(campaign: any) {
    // TODO: 实现查看详情功能
    console.log('查看活动详情:', campaign);
  }

  editContent(content: any) {
    // TODO: 实现编辑功能
    console.log('编辑内容:', content);
  }

  publishContent(content: any) {
    // TODO: 实现发布功能
    console.log('发布内容:', content);
  }

  deleteContent(content: any) {
    // TODO: 实现删除功能
    console.log('删除内容:', content);
  }

  viewTaskDetails(task: any) {
    // TODO: 实现查看任务详情功能
    console.log('查看任务详情:', task);
  }

  async generateReport() {
    try {
      const response = await marketingService.generateAnalyticsReport('7days', ['douyin', 'xiaohongshu'] as any) as any;
      
      if (response.success) {
        toast.success('报告生成成功');
        // TODO: 处理报告下载或显示
        console.log('分析报告:', response.data);
      }
    } catch (error) {
      console.error('生成报告失败:', error);
      toast.error('生成报告失败');
    }
  }

  // 生命周期
  async mounted() {
    await Promise.all([
      this.loadDashboardData(),
      this.loadCampaigns(),
      this.loadContents(),
      this.loadPublishTasks()
    ]);
  }
}
</script>

<style scoped>
.marketing-dashboard {
  @apply min-h-screen bg-gray-50 p-6;
}

.page-header {
  @apply mb-8;
}

.page-title {
  @apply text-3xl font-bold text-gray-900 mb-2;
}

.page-subtitle {
  @apply text-lg text-gray-600;
}

.overview-section {
  @apply mb-8;
}

.overview-cards {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
}

.overview-card {
  @apply bg-white rounded-lg shadow-sm p-6 border border-gray-200;
}

.card-icon {
  @apply mb-4;
}

.card-content {
  @apply space-y-2;
}

.card-title {
  @apply text-sm font-medium text-gray-600;
}

.card-value {
  @apply text-2xl font-bold text-gray-900;
}

.card-trend {
  @apply text-sm font-medium;
}

.card-trend.positive {
  @apply text-green-600;
}

.function-nav {
  @apply mb-8;
}

.nav-tabs {
  @apply flex space-x-1 bg-gray-100 p-1 rounded-lg;
}

.nav-tab {
  @apply flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-tab:not(.active) {
  @apply text-gray-600 hover:text-gray-900 hover:bg-white;
}

.nav-tab.active {
  @apply bg-white text-blue-600 shadow-sm;
}

.content-area {
  @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.tab-content {
  @apply p-6;
}

.section-header {
  @apply flex items-center justify-between mb-6;
}

.section-title {
  @apply text-xl font-semibold text-gray-900;
}

.btn-primary {
  @apply inline-flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
}

.btn-secondary {
  @apply inline-flex items-center space-x-2 px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors;
}

.campaigns-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.campaign-card {
  @apply bg-gray-50 rounded-lg p-6 border border-gray-200;
}

.campaign-header {
  @apply flex items-center justify-between mb-3;
}

.campaign-name {
  @apply text-lg font-semibold text-gray-900;
}

.campaign-status {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.campaign-status.active {
  @apply bg-green-100 text-green-800;
}

.campaign-status.draft {
  @apply bg-gray-100 text-gray-800;
}

.campaign-status.paused {
  @apply bg-yellow-100 text-yellow-800;
}

.campaign-status.completed {
  @apply bg-blue-100 text-blue-800;
}

.campaign-description {
  @apply text-gray-600 mb-4;
}

.campaign-metrics {
  @apply grid grid-cols-3 gap-4 mb-4;
}

.metric {
  @apply text-center;
}

.metric-label {
  @apply block text-xs text-gray-500 mb-1;
}

.metric-value {
  @apply block text-sm font-semibold text-gray-900;
}

.campaign-actions {
  @apply flex space-x-2;
}

.content-filters {
  @apply flex space-x-4 mb-6;
}

.filter-select {
  @apply px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.filter-input {
  @apply flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.content-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.content-card {
  @apply bg-gray-50 rounded-lg p-4 border border-gray-200;
}

.content-preview {
  @apply mb-4;
}

.content-type-icon {
  @apply w-12 h-12 rounded-lg flex items-center justify-center;
}

.content-type-icon.video {
  @apply bg-red-100 text-red-600;
}

.content-type-icon.image {
  @apply bg-green-100 text-green-600;
}

.content-type-icon.text {
  @apply bg-blue-100 text-blue-600;
}

.content-info {
  @apply space-y-3;
}

.content-title {
  @apply font-semibold text-gray-900;
}

.content-description {
  @apply text-sm text-gray-600;
}

.content-tags {
  @apply flex flex-wrap gap-1;
}

.content-tag {
  @apply px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full;
}

.content-meta {
  @apply flex items-center justify-between;
}

.content-date {
  @apply text-xs text-gray-500;
}

.content-actions {
  @apply flex space-x-1;
}

.action-btn {
  @apply p-1.5 text-gray-400 hover:text-gray-600 rounded-md hover:bg-gray-100 transition-colors;
}

.analytics-section {
  @apply mb-8;
}

.analytics-title {
  @apply text-lg font-semibold text-gray-900 mb-4;
}

.platform-stats {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.platform-card {
  @apply bg-gray-50 rounded-lg p-6 border border-gray-200;
}

.platform-header {
  @apply flex items-center justify-between mb-4;
}

.platform-name {
  @apply text-lg font-semibold text-gray-900;
}

.platform-engagement {
  @apply text-sm text-green-600 font-medium;
}

.platform-metrics {
  @apply grid grid-cols-2 gap-4;
}

.platform-metric {
  @apply text-center;
}

.trending-topics {
  @apply space-y-3;
}

.topic-item {
  @apply flex items-center justify-between;
}

.topic-name {
  @apply text-gray-900 font-medium;
}

.topic-heat {
  @apply flex items-center space-x-2;
}

.heat-bar {
  @apply h-2 bg-blue-500 rounded-full;
  width: 100px;
}

.heat-value {
  @apply text-sm text-gray-600;
}

.recent-activities {
  @apply space-y-4;
}

.activity-item {
  @apply flex items-start space-x-3;
}

.activity-icon {
  @apply w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center text-gray-600;
}

.activity-content {
  @apply flex-1;
}

.activity-text {
  @apply text-gray-900 mb-1;
}

.activity-time {
  @apply text-xs text-gray-500;
}

.tasks-list {
  @apply space-y-4;
}

.task-item {
  @apply flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200;
}

.task-info {
  @apply flex-1;
}

.task-title {
  @apply font-semibold text-gray-900 mb-1;
}

.task-platforms {
  @apply text-sm text-gray-600 mb-1;
}

.task-time {
  @apply text-xs text-gray-500;
}

.task-status {
  @apply mx-4;
}

.status-badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.status-badge.pending {
  @apply bg-yellow-100 text-yellow-800;
}

.status-badge.publishing {
  @apply bg-blue-100 text-blue-800;
}

.status-badge.completed {
  @apply bg-green-100 text-green-800;
}

.status-badge.failed {
  @apply bg-red-100 text-red-800;
}

.task-actions {
  @apply flex space-x-2;
}

/* 弹窗样式 */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto;
}

.modal-header {
  @apply flex items-center justify-between p-6 border-b border-gray-200;
}

.modal-title {
  @apply text-lg font-semibold text-gray-900;
}

.modal-close {
  @apply text-gray-400 hover:text-gray-600 transition-colors;
}

.modal-body {
  @apply p-6;
}

.form-group {
  @apply mb-4;
}

.form-row {
  @apply grid grid-cols-2 gap-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none;
  height: 100px;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-hint {
  @apply text-xs text-gray-500 mt-1;
}

.checkbox-group {
  @apply space-y-2;
}

.checkbox-item {
  @apply flex items-center space-x-2;
}

.checkbox-item input[type="checkbox"] {
  @apply rounded border-gray-300 text-blue-600 focus:ring-blue-500;
}

.modal-actions {
  @apply flex justify-end space-x-3 mt-6;
}
</style>